<template>
    <el-form :model="form" label-position="right" ref="formRef" :rules="formRules" class="borderNone" disabled>
        <ts-card header="基本信息">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="销售合同" required>
                        <span>{{ form.omOrderNo }}</span>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="业务员">
                        <span>{{ form.salesName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="订单批次号" required>
                        <el-input v-model="form.number">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="报关操作" required>
                        <span>{{ form.customsOperatorName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="报关单位名称">
                        <el-input style="margin-top: 5px" v-model="form.sellerName" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="报关单位代码">
                        <el-input v-model="form.customsCompanyCode" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="统一社会信用代码">
                        <el-input style="margin-top: 5px" v-model="form.unifiedSocialCode" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <el-form-item label="开户行" required>
                        <span>{{ form.bankName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="代理行" required>
                        <span>{{ form.correspondentBankName }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </ts-card>
    </el-form>
    <ts-card>
        <template #header>
            <div style="display: flex;justify-content: space-between;">
                <span>附件列表</span>
                <div style="display: flex;">
                    <el-button type="primary" icon="ts-icon-file-excel" @click="exportExcels">批量导出</el-button>
                    <el-button icon="ts-icon-file-excel" @click="exportExcels2">合并行导出</el-button>
                    <el-button icon="ts-icon-file-excel" @click="detailExcel">合并预览</el-button>
                </div>
            </div>
        </template>
        <el-table :data="dataList" @selection-change="rowChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="发票号" width="200" prop="invoiceNumber">
            </el-table-column>
            <el-table-column label="订舱英文名" prop="bookingSpaceEnName" width="200">
            </el-table-column>
            <el-table-column label="报关英文名" width="200" prop="customsDeclarationEnName">
            </el-table-column>
            <el-table-column label="报关中文名" prop="customsDeclarationName" width="150"></el-table-column>
            <el-table-column label="HS CODE" prop="hscode" width="100"></el-table-column>
            <el-table-column label="危险品信息" prop="dangerousKind" width="100"></el-table-column>
            <el-table-column label="出货数" width="120" prop="qty">
            </el-table-column>
            <el-table-column label="件数" prop="pieces" width="120"></el-table-column>
            <el-table-column label="体积" prop="volume" width="120"></el-table-column>
            <el-table-column label="毛重" prop="totalGrossWeight" width="120">
            </el-table-column>
            <el-table-column label="单位净重" prop="netWeight" width="120">
            </el-table-column>
            <el-table-column label="FOB总价" prop="totalAmount" width="120">
            </el-table-column>
            <el-table-column label="报关运费" prop="customsDeclarationFreight" width="120">
            </el-table-column>
            <el-table-column label="报关金额" prop="customsDeclarationAmount" width="120">
            </el-table-column>
            <el-table-column label="保费" width="120" prop="premiums">
            </el-table-column>
            <el-table-column label="包装种类" width="180" prop="packagingTypeName">
            </el-table-column>
            <el-table-column label="货源地" width="200" prop="goodsOrigPlace">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <div style="display: flex;">
                        <el-button size="small" icon="ts-icon-file-excel" @click="exportExcel(scope.row)">导出</el-button>
                        <el-button size="small" :icon="Reading" @click="detailExcel(scope.row)"> 预览</el-button>
                    </div>
                </template>
            </el-table-column>
            <template #append>
                <div style="display: flex; background-color: #fff1d4">
                    <div style="display: flex; padding: 8px 0">
                        <div class="sum_footer_unit" style="width: 1430px">合计</div>
                        <div class="sum_footer_unit" style="width: 240px">
                            {{ form.totalGrossWeight }}
                        </div>
                        <div class="sum_footer_unit" style="width: 240px">
                            {{ form.totalAmount }}
                        </div>
                        <div class="sum_footer_unit">
                            {{ form.customsDeclarationAmount }}
                        </div>
                    </div>
                </div>
            </template>
        </el-table>
    </ts-card>
</template>
<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { ElNotification,ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { Refresh, Plus, Close, Reading } from "@element-plus/icons-vue";
import Api from "@/api/model/om";
import { deepClone } from "@/utils/arr";
import useTabs from "@/utils/useTabs";
import tool from "@/utils/tool";
const emit = defineEmits(["updatetable"]);
import reportAPI from "@/api/model/report";
const router = useRouter();
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {},
    },
});
const form = ref({})
const dataList = ref([])
const files = ref([])
onMounted(() => {
    getInit()
})
const getInit = async (val) => {
    let res;
    res = await Api.shippingOrder.detail.post(props.paramsData);
    console.log(res)
    if (res.code == "200") {
        form.value = deepClone(res.data);
        dataList.value = res.dataList;
    }
};
const rowChange = async (rows) => {

    files.value = rows

}
const exportExcel = async (row) => {
    console.log(row.id)
    let res = await reportAPI.exportToExcel.post({
        fileName: 'InvoiceInfoTemplate',
        fieldMap: { id: row.id },
    });
    if (res.code == '200') {
        window.open(res.fileName)
    }
}
const detailExcel = async (row) => {
    if (row.id) {
        console.log(row)
        router.push({
            path: '/reportView',
            query:{id:row.id,fileName:'InvoiceInfoTemplate'}
        })
    }
    else {
        if (files.value.length < 2) {
            ElMessage.warning({ message: '至少选择两条记录' })
        }
        else {
            let param = {
                fileName: 'MergeInvoiceInfoTemplate',
                id: form.value.id,
                rowIds: files.value.map(ele => {
                    return ele.id
                })
            }
            console.log(param)
            router.push({
                path: '/reportView',
                query: param
            })
        }

    }
}
const exportExcels = async (row) => {
    if (files.value.length < 2) {
        ElMessage.warning({ message: '至少选择两条记录' })
    }
    else {
        let param = {
            dataList: files.value.map(ele => {
                return { id: ele.id, fileName: 'CustomsDeclarationDocTemplate' }
            }),
            id: form.value.id
        }
        console.log(param)
        let res = await reportAPI.zipFile.post(param);
        if (res.code == '200') {
            window.open(res.fileName)
        }
    }

}
const exportExcels2 = async (row) => {
    if (files.value.length < 2) {
        ElMessage.warning({ message: '至少选择两条记录' })
    }
    else {
        let param = {
            fileName: 'MergeInvoiceInfoTemplate',
            id: form.value.id,
            rowIds: files.value.map(ele => {
                return ele.id
            })
        }
        console.log(param)
        let res = await reportAPI.mergeRowsExportExcel.post(param);
        if (res.code == '200') {
            window.open(res.fileName)
        }
    }

}
</script>